<template>
  <a-card  style="overflow-y: auto">
    <a-tabs defaultActiveKey="1">
      <a-tab-pane tab="确认支付" key="1" >
        <a-row type="flex" style="margin-bottom:10px"  :gutter="16">
          <a-col :span="2" style="text-align: center">
          </a-col>
          <a-col :span="4" style="text-align: center">
            支付状态
          </a-col>
          <a-col :span="5" style="text-align: center">
            <span style="color: red">*</span> 支付日期
          </a-col>
          <a-col :span="4" style="text-align: center">
            <span style="color: red">*</span> 支付金额(元)
          </a-col>
          <a-col :span="5" style="text-align: center">
            支票号码
          </a-col>
          <a-col v-show="!onlyView" :span="4" style="text-align: center">
            操作
          </a-col>
        </a-row>
        <a-row type="flex" style="margin-bottom:10px" :gutter="16" v-for="(info,index) in confirmPaymentList">
          <a-col :span="2"></a-col>
          <a-col :span="4">
            <a-select :disabled="onlyView" placeholder="请选择支付状态" default-value="1" style="width: 100%" v-model="info.confirmPaymentState">
              <a-select-option value="1">
                已支付
              </a-select-option>
<!--              <a-select-option value="2">-->
<!--                未支付-->
<!--              </a-select-option>-->
            </a-select>
          </a-col>
          <a-col :span="5">
            <a-date-picker :disabled="onlyView" style="width: 100%" v-model="info.confirmPaymentDate" placeholder="请选择支付日期" @change="(date,dateString)=>onConfirmPaymentDateChange(date,dateString,index)" />
            <!--              <a-input placeholder="请输入支付年月" v-model="info.confirmPaymentDate"/>-->
          </a-col>
          <a-col :span="4">
              <a-input-number :disabled="onlyView" :max="999999999.99"
                              :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                              :parser="value => value.replace(/(,*)/g, '').match(/^\d*(\.?\d{0,2})/g)[0] || ''"
                              style="width: 100%" placeholder="0.00" v-model="info.confirmPaymentAmount" :step="0.01" @keyup="handleMoneyInput"/>
          </a-col>
          <a-col :span="5">
            <a-input :disabled="onlyView" placeholder="请输入支票号码" v-model="info.confirmPaymentNumber"></a-input>
          </a-col>
          <a-col v-show="!onlyView" :span="4" style="text-align: center">
            <a-button @click="add" icon="plus" style="margin-right: 10px"></a-button>&nbsp;
            <a-button @click="remove(index)" v-if="index!==0" icon="minus"></a-button>
          </a-col>
        </a-row>
        <a-row type="flex" style="margin-bottom:10px" :gutter="16">
          <a-col :span="20" style="text-align: right;padding-top: 20px">
            <span>报销总金额:{{ this.totalAmount }}元</span>
            <span style="margin-left: 10px">已支付金额:{{ this.payAmount }}元</span>
            <span style="margin-left: 10px;color:red">未支付金额:{{ this.unpaidAmount }}元</span>
          </a-col>
          <a-col :span="4" style="text-align: center;padding-top: 20px">
            <a-popover>
              <template slot="content">
                <p>保存填写的支付信息，并验证金额正确性</p>
              </template>
              <a-button v-if="!onlyView" @click="handleOk" type="primary" >确认支付</a-button>
            </a-popover>

          </a-col>
        </a-row>
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>

<script>
  import { httpAction,getAction } from '@/api/manage'
  import { postAction } from '../../api/manage'
  export default {
    name: 'ConfirmPaymentModal',
    props: {
      reimbId: String,
      onlyView: Boolean
    },
    computed:{
      payAmount () {
        let amount = 0.0
        this.confirmPaymentList.forEach(value => {
          if(value.confirmPaymentState==='1'){
            amount+=(value.confirmPaymentAmount?Number(value.confirmPaymentAmount):0.0)
          }
        })
        return amount.toFixed(2)
      },
      unpaidAmount () {
        return (Number(this.totalAmount?this.totalAmount:0) - Number(this.payAmount)).toFixed(2)
      }
    },
    data(){
      return{
        totalAmount:0,
        confirmPaymentList:[{confirmPaymentState:'1',confirmPaymentAmount:'',confirmPaymentDate:''}],
        form:this.$form.createForm(this),
        model:{},
        url: {
          addOrUpdate:'/expenditure/expenditureConfirmPayment/addOrUpdate',
          getByReimbId:'/expenditure/expenditureConfirmPayment/getByReimbId',
          getPaymentOk:'/expenditure/expenditureConfirmPayment/getPaymentOk',
          getReimbById:'/reimb/expenditureReimbInfo/queryById'
        }
      }
    },
    created() {
      this.initData(this.reimbId)
    },
    methods: {
       getPaymentOk(reimbId){
         return new Promise((resolve, reject) => {
           getAction(this.url.getPaymentOk,{reimbId:reimbId}).then(res=>{
             if(!res.success && res.message){
               this.$message.warn(res.message)
             }
             res.success?resolve(1):resolve(0)
             return res.success
           })
         })
      },
      initData(reimbId){
         getAction(this.url.getReimbById,{id:reimbId}).then(res=>{
           if(res.success){
             this.totalAmount = res.result.totalamount
           }else{
             this.totalAmount = 0
           }
           getAction(this.url.getByReimbId,{reimbId:reimbId}).then(res=>{
             if(res.success && res.result && res.result.length>0){
               this.confirmPaymentList = res.result
               this.$emit("havePayment",true)
             }else{
               this.confirmPaymentList = [{confirmPaymentState:'1',confirmPaymentAmount:this.totalAmount,confirmPaymentDate:new Date().format("yyyy-MM-dd")}]
               this.$emit("havePayment",false)
             }
           })
         })
      },
      onConfirmPaymentDateChange(date,dateString,index){
        this.confirmPaymentList[index].confirmPaymentDate = dateString
      },
      handleMoneyInput(e) {
        if(e.code!='Backspace'){
          var num = e.target.value.replace(/(,*)/g, '');
          e.target.value = num.match(/^\d*(\.?\d{0,2})/g)[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',') || ''
        }
      },
      /**
       * @description 添加一个新的支付记录
       * @author vinjor-m(加注释)
       * modify by      date        description
       * vinjor-m   2021年7月6日   添加一个新的支付记录，自动计算出未支付剩余金额
       */
      add(){
        let payMoney = 0
        this.confirmPaymentList.map(item=>{
          if(""!=item.confirmPaymentAmount && null!=item.confirmPaymentAmount){
            payMoney+=Number(item.confirmPaymentAmount)
          }
        })
        let thisPayMoney = Number(this.totalAmount)-payMoney
        this.confirmPaymentList.push({confirmPaymentState:'1',confirmPaymentAmount:thisPayMoney,confirmPaymentDate:''})
      },
      remove(index){
        if (this.confirmPaymentList.length == 1) {
          this.$notification['warning']({
            message: '请最少保留一条记录'
          })
          return
        }
        this.confirmPaymentList.splice(index,1)
        this.$forceUpdate()
      },
      handleOk(){
         let ok = true
         this.confirmPaymentList.forEach(value => {
           if(!value.confirmPaymentDate ||value.confirmPaymentDate === '' || !value.confirmPaymentAmount || value.confirmPaymentAmount === ''){
             this.$message.warn("请完整填写确认支付信息")
             ok = false
             return false
           }
           value.reimbId = this.reimbId
         })
        if(ok){
          postAction(this.url.addOrUpdate,this.confirmPaymentList).then(res=>{
            if(res.success){
              (res.message && res.message!=='')?this.$message.info(res.message):''
              return true
            }else{
              this.$message.error(res.message)
              return false
            }
          })
        }
      },
    }
  }
</script>

<style scoped>

</style>